<template>
  <!-- :visible 绑定动态属性来表示弹出框是否显示，true就是显示，false是隐藏 -->
  <!-- 后面的.sync修饰符，表示同步双向的来表示visible的值是true还是false，加上这个
  标识符可以同步的修改visible的值 -->
  <el-dialog
    title="修改用户"
    :visible.sync="dialogFormVisible"
    @close="$emit('close')"
  >
    <el-form :model="user" ref="userForm" :rules="rules">
      <el-form-item label="姓名" label-width="80px" prop="name">
        <el-input v-model="user.name"></el-input>
      </el-form-item>

      <el-form-item label="性别" label-width="80px" align="left">
        <el-radio v-model="user.sex" :label="0">男</el-radio>
        <el-radio v-model="user.sex" :label="1">女</el-radio>
      </el-form-item>

      <el-form-item label="年龄" label-width="80px" align="left">
        <el-input-number
          v-model="user.age"
          :min="1"
          :max="100"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="生日" label-width="80px" align="left">
        <el-date-picker
          v-model="user.birthday"
          type="date"
          placeholder="请选择生日"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="地址" label-width="80px">
        <el-input v-model="user.address" type="textarea"></el-input>
      </el-form-item>

      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定修改</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "user-adit", //给这个组件自定义一个名字而已，名字最好和当前组件名字一样，方便后期维护
  props:['item'],//props接收父组件传的数据  父传子 自定义属性 item是父组件自定义的属性名
  data() {
    return {
      dialogFormVisible: true,
      user: {
        rules: "",
        sex: 1,
        age: 18,
        birthday: "",
        address: "",
      },
    };
  },
   
  mounted() {
    // 实现数据回显，如果直接使用，会改变原始数据
    // this.user=this.item
    this.user = Object.assign({},this.item)
  },

  methods: {
    handleSubmit() {
      //点击确定
      this.$refs.userForm.validate(async (valid) => {
        if (valid) {
          //验证通过了
        //   添加的接口
        //   let res = await this.$http.post("/api/user/add", {
        //     //第一参数是请求的地址 第二参数是传递的数据
        //     ...this.user, //把当前的user对象发送给服务器  老写法是 user:this.user
        //   });
        
        // 修改的接口
          let res = await this.$http.post("/api/user/update", {
            //第一参数是请求的地址 第二参数是传递的数据
            ...this.user, //把当前的user对象发送给服务器  老写法是 user:this.user
          });
          console.log(res);
          if (res.data.code == 1) {
            //说明请求成功了
            this.dialogFormVisible = false; //添加完成后关闭对话框
            // 调用关闭的事件
            this.$emit("close", "success"); //向父元素User.vue 发射数据 close事件名，cuccess传递的内容
          }
        } else {
          console.log("提交错误");
          return false;
        }
      });
    },
  },
};
</script>
